<template>
	<view class="page flex-col">
		<view class="box_5 flex-col">
			<view class="box_2 flex-col"></view>
			<view class="flex-row justify-between" style="
					width: 100%;
					line-height: 36px;
					display: flex;
					align-items: center;
				">
				<view @click="select(1)" :class="active == 1 ? 'active text_4' : 'text_4'">
					项目介绍
				</view>
				<view @click="select(2)" :class="active == 2 ? 'active text_4' : 'text_4'">
					团队介绍
				</view>
				<view @click="select(3)" :class="active == 3 ? 'active text_4' : 'text_4'">
					关联产品
				</view>
			</view>
			<zhuanjia :expert="expert" v-show="active == 2"></zhuanjia>
			<goods :goodslist="goods" v-show="active == 3"></goods>
			<!-- <view class="box_3 flex-col"></view> -->
			<!-- <view> -->
			<view v-show="active == 1">
				<view class="image-wrapper_1 flex-col">
					<video v-if="form.file" style="width: 100%" :src="form.file" autoplay="true" enable-danmu danmu-btn
						controls="false"></video>
					<!-- <image v-else :src="form" referrerpolicy="no-referrer"  /> -->
				</view>
				<view class="box_6 flex-row justify-between flex at">
					<text class="text_6">地址： {{ form.address }}</text>
					<view class="group_3 flex-row">
						<view @click="gomap" class="image-text_2 flex-row justify-between flex at">
							<text class="text-group_1">导航</text>
							<image class="image_4" referrerpolicy="no-referrer" src="@/static/dh.png" />
						</view>
					</view>
				</view>
				<view class="text_7 u-m-r-30" style="margin-bottom: 120rpx">
<!--					<rich-text :nodes="form.project_desc"></rich-text>-->
					<u-parse :html="form.project_desc"></u-parse>
					<!-- {{form.project_desc}} -->
				</view>
			</view>
			<!-- </view> -->
		</view>
		<view class="cj" @click="handleJect" v-if="form.is_join==0">
			<!-- <text class="text_8"></text> -->
			我要参与
		</view>
		<!-- 登录 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
	</view>
</template>
<script>
	import zhuanjia from "./zhuajia.vue";
	import goods from "./goods.vue";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	export default {
		components: {
			zhuanjia,
			goods,
		},

		// 是否登录
		computed: {
			...mapGetters(["isLogin", "authType", "userInfo"]),
		},
		data() {
			return {
				goods: [],
				constants: {},
				active: 1,
				form: {},
				expert: {},
				jectId: "",
				location: "",
			};
		},
		onLoad(e) {
			console.log(e, "21212");
			this.getlist(e.id);
			this.jectId = e.id;
		},
		onshow() {
			this.getlist(this.jectId)
		},
		methods: {
			
			getlist(e) {
				this.$http("project.info", {
					id: e,
				}).then((res) => {
					console.log(res);
					uni.setStorageSync('kefu',res.data.kefu)
					this.form = res.data;
					this.expert = res.data.expert_list;
					this.goods = res.data.goodslist;
					this.location = res.data.location;
				});
			},

			select(e) {
				this.active = e;
			},
			gomap() {
				uni.openLocation({
					longitude: this.location.lng,
					latitude: this.location.lat,
					name: "", //地址名称
					address: this.form.address, //详细地址名称
					success: function() {
						console.log("导航成功");
					},
					fail: function(error) {
						console.log(error);
					},
				});
			},
			handleJect() {
				if (this.isLogin) {
					if (this.userInfo.is_vip == 0) {
						uni.navigateTo({
							url: "/pages/index/project_list/qrorder"
						});
					} else {
						uni.navigateTo({
							url: "/pages/index/projectProp/index?isvip=" +
								this.userInfo.is_vip +
								"&type=" +
								1 +
								"&id=" +
								this.jectId,
						});
					}

				} else {
					this.$store.dispatch("showAuthModal");
				}
			},
		},
	};
</script>
<style scoped>
	.cj {
		position: fixed;
		left: 1%;
		width: 98%;
		height: 86rpx;
		line-height: 86rpx;
		background: linear-gradient(101deg, #ffa040 0%, #ed861f 100%);
		border-radius: 43px;
		bottom: 20px;
		z-index: 100;
		text-align: center;
		color: #fff;
		font-size: 14px;
	}

	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;

		overflow: hidden;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
	}

	.group_4 {
		width: 679rpx;
		height: 42rpx;
		margin: 24rpx 0 0 35rpx;
	}

	.text_1 {
		width: 108rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(47, 95, 220, 1);
		font-size: 30rpx;
		letter-spacing: -0.6000000238418579rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.label_1 {
		width: 34rpx;
		height: 21rpx;
		margin: 10rpx 0 0 437rpx;
	}

	.label_2 {
		width: 31rpx;
		height: 22rpx;
		margin: 10rpx 0 0 10rpx;
	}

	.label_3 {
		width: 49rpx;
		height: 24rpx;
		margin: 9rpx 0 0 10rpx;
	}

	.group_5 {
		width: 690rpx;
		height: 64rpx;
		margin: 34rpx 0 12rpx 30rpx;
	}

	.image_1 {
		width: 18rpx;
		height: 32rpx;
		margin-top: 14rpx;
	}

	.text_2 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 5rpx 0 0 255rpx;
	}

	.image_2 {
		width: 174rpx;
		height: 64rpx;
		margin-left: 99rpx;
	}

	.box_5 {}

	.box_2 {
		background-color: rgba(247, 247, 247, 1);
		/* width: 750rpx;
  height: 10rpx; */
	}

	.text-wrapper_3 {
		/* width: 602rpx;
  */
		height: 40rpx;
		margin: 30rpx 0 0 74rpx;
	}

	.active {
		width: 112rpx;
		height: 40rpx;
		color: rgba(237, 134, 31, 1) !important;
		font-weight: 500;
		line-height: 40rpx;
	}

	.text_4 {
		text-align: center;
		width: 33.3%;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		/* text-align: right; */
		white-space: nowrap;
		line-height: 40rpx;
		/* margin-left: 133rpx; */
	}

	.text_5 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 133rpx;
	}

	.box_3 {
		background-color: rgba(237, 134, 31, 1);
		border-radius: 2rpx;
		width: 66rpx;
		height: 4rpx;
		margin: 12rpx 0 0 97rpx;
	}

	.image-wrapper_1 {
		border-radius: 20rpx;
		margin: 30rpx;
		overflow: hidden;
	}

	.image_3 {
		width: 100%;
	}

	.box_6 {
		width: 690rpx;
		height: 48rpx;
		margin: 28rpx 0 0 30rpx;
	}

	.text_6 {
		width: 364rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin-top: 4rpx;
	}

	.group_3 {
		background-color: rgba(237, 134, 31, 1);
		border-radius: 24rpx;
		width: 122rpx;
		height: 48rpx;
	}

	.image-text_2 {
		width: 75rpx;
		height: 33rpx;
		margin: 7rpx 0 0 24rpx;
	}

	.text-group_1 {
		width: 48rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 33rpx;
	}

	.image_4 {
		width: 19rpx;
		height: 21rpx;
		margin-top: 7rpx;
	}

	.text_7 {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		/* padding: 20px; */
		box-sizing: border-box;
		margin: 28rpx 0 0 30rpx;
	}

	.text-wrapper_2 {
		height: 86rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8cdb0dae03e0ca58685ed57feb0fc22cd1027157d8cd56d06429e6395015cfa2) 100% no-repeat;
		background-size: 100% 100%;
		width: 690rpx;
		margin: 220rpx 0 125rpx 30rpx;
		line-height: 45px;
	}

	.text_8 {
		width: 120rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 22rpx 0 0 285rpx;
	}

	.image_5 {
		width: 750rpx;
		height: 68rpx;
		margin-top: -1rpx;
	}
</style>
